<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="柜组编号" prop="cabinetGroupNo">
        <el-input v-model="queryParams.cabinetGroupNo" placeholder="请输入柜组编号" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item label="区域id" prop="regionId">
        <el-input v-model="queryParams.regionId" placeholder="请输入区域id" clearable @clear="getDataList" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addOrUpdateHandle('add')">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" :disabled="single" plain icon="el-icon-edit" size="mini" @click="addOrUpdateHandle()">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" :disabled="multiple" plain icon="el-icon-delete" size="mini" @click="deleteHandle">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportHandle">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" width="120" align="center" prop="id" />
      <el-table-column label="姓名" width="150" align="center" prop="name" />
      <el-table-column label="手机号" width="120" align="center" prop="mobile" />
      <el-table-column label="柜组编号" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.cabinetGroupNo!='' ? scope.row.cabinetGroupNo.join(',') : ''}}
        </template>
      </el-table-column>
      <el-table-column label="所在城市" width="240" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regionVo ?  scope.row.regionVo.area.mergename : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在区域" width="240" header-align="center" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.regionVo ?  scope.row.regionVo.details : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160" align="center" prop="createTime" />
      <el-table-column label="更新时间" width="160" align="center" prop="updateTime" />
      <el-table-column fixed="right" width="360" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-more" @click="orderListHandle(scope.row)">推广订单列表</el-button>
          <el-button size="mini" type="text" icon="el-icon-full-screen" @click="qrcodeHandle(scope.row)">二维码</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <!-- 二维码弹窗 -->
    <el-dialog title="二维码展示" class="common_dialog_in" custom-class="reset-dialog-width" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="qrcodeShow" append-to-body>
      <div id="qrlist" class="qrCode">
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qrcodeShow = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 订单列表展示 -->
    <el-dialog title="推广订单列表" class="common_dialog" custom-class="reset-dialog-width" :visible.sync="orderListShow" append-to-body>
      <orderList v-if="orderListShow" :detailBtn="true" :params="queryParams"></orderList>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderListShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './index-add-or-update.vue'  //新增修改的状态弹窗
import QRCode from 'qrcodejs2'
import OrderList from '../../order/orderList.vue'  //订单列表的组件
import { getConfigByGroup } from "@/api/basic/set";
export default {
  name: "",
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/extensionWorker/list',
        getDataListIsPage: true,
        deleteURL: '/extensionWorker/remove',
        deleteIsBatch: true
      },
      // 查询参数
      queryParams: {
        cabinetGroupNo: '',
        mobile: '',
        name: '',
        regionId: '',
      },
      qrcodeShow: false, //二维码弹窗是否显示
      qrcodeText: "", //二维码展示文字
      orderListShow: false, //推广订单弹窗是否显示
      queryParams: {
        bdId: ''
      },
      codeList: [], //二维码列表
    };
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
    OrderList, //订单列表的组件
  },
  methods: {
    // 点击展示推广订单列表
    orderListHandle(row) {
      this.orderListShow = true
      this.queryParams.bdId = row.id
    },
    //点击展示二维码
    qrcodeHandle(row) {
      this.codeList = []
      let string
      if(row.cabinetGroupNo == '041'){
         string = 'qrcodeSchool_show'
      }else{
        string = 'qrcode_show'
      }
      getConfigByGroup(string).then((res) => {
        res.length && res.map((item, index) => {
          this.codeList.push({
            title: item.title,
            value: item.value,
            name: item.name
          })
        })
        this.getCodeHtml(row)
      })

    },
    getCodeHtml(row) {
      var self = this;
      this.qrcodeShow = true
      let timer = (new Date(new Date().toLocaleDateString()).getTime() / 1000 + 10 * 60 * 60 - 1) 
      var html = '';
      this.$nextTick(() => {
        self.codeList.map((item, index) => {
          html += '<div class="item">'
          html += '<div id="qrlist' + index + '"></div>'
          html += '<div class="qrcode_text"><p>BD人员名称：' + row.name + '</p><p>二维码类型：' + item.title + '</p></div>'
          html += '</div>'
        })
        document.getElementById("qrlist").innerHTML = html
        for (let j = 0; j < self.codeList.length; j++) {
          document.getElementById('qrlist' + j).innerHTML = ''; //置空
          let qrcode = new QRCode(document.getElementById('qrlist' + j), {
            text: self.codeList[j].value + '&bdId=' + row.id + '&timer=' + timer,
            width: 270,//二维码宽度
            height: 270,//二维码高度
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
            correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
          });
        }
      })
    }

  }
};
</script>
<style lang="scss" scoped>
.common_dialog_in {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  ::v-deep.el-dialog {
    margin: 0 auto !important;
    max-height: 1000px;

    .el-dialog__body {
      overflow: hidden;
      overflow-y: auto;
      max-height: 800px;
    }
  }
}
.qrCode {
  display: flex;
  flex-wrap: wrap;
  ::v-deep.item {
    margin-right: 60px;
  }
  ::v-deep.item:nth-child(3n) {
    margin-right: 0;
  }
}
::v-deep .qrcode_text {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  font-weight: bold;
}
</style>